<script src='http://shjs.sourceforge.net/lang/sh_javascript.js'></script>
<script src='http://shjs.sourceforge.net/sh_main.js'></script>
<link rel="stylesheet" href="../style/style.css">
<link rel='stylesheet' type='text/css' href='../style/code.css'>

<body onload="sh_highlightDocument('sh', 'javascript');">
<div id='supercontainer' ><title>
Initialization
</title>
<h1 id="exercise-2.-initialize-the-gtvremote-object">Exercise 2. Initialize the GTVRemote object</h1>
<h2 id="goal">Goal</h2>
<ul>
<li>Complete the NPAPI plumbing so that the plugin is available in JavaScript.<br /></li>
<li>Initialize the GTVRemote object</li>
<li>Create the three clients: Discovery client, Pairing session, Anymote session</li>
</ul>
<p>In this exercise, we will be implementing this button:</p>
<center>
<img src="../images/initialize_function.png" width="80%" alt="Initialize function" title="Initialize function">
</center>

<h2 id="prep">Prep</h2>
<ul>
<li>Completed Exercise 1 <a href="install_extensions.html">Installing the AnymoteLearningExercise extension</a></li>
<li>Open popup.html and googletvremote_controller.js in the text editor of your choice.</li>
</ul>
<h2 id="popup.html">popup.html</h2>
<h3 id="making-a-trivial-change">0. Making a trivial change</h3>
<p>To make sure you are setup correctly, open the popup.html file in a text editor (not a browser), then</p>
<ul>
<li>Find the popup heading tag that says &quot;Learning exercise for Anymote&quot;</li>
<li>Change the title to your name instead</li>
<li>Save the file and click on the icon again to relaunch the popup window</li>
</ul>
<p>Your new title should display in the popup window. This was just a test to show you that you don't need to compile or reload the extension. Just save your changes and you are all set. The extension will use your new code when the popup launches.</p>
<h2 id="googletvremote_controller.js">googletvremote_controller.js</h2>
<h3 id="creating-an-embed-element">1. Creating an embed element</h3>
<p>In order to use the NPAPI plugin, you must create an embed element of type 'application/x-gtvremote' and append it to some page. In this example we will append the embed directly to the popup.html page, but in general we recommend using the extension's background page.</p>
<p>Open the googletvremote_controller.js file and find this function:</p>
<pre class="sh_javascript"><code>var googletvremoteInitializePlugin = function() {
  displayToast('googletvremoteInitializePlugin not implemented');

  // TODO: Create an embed of type application/x-gtvremote
};
</code></pre>

Replace the contents of that function with
<pre class="sh_javascript"><code>var googletvremoteInitializePlugin = function() {
  var pluginEl = document.getElementById('pluginId');
  if (pluginEl) {
    pluginEl.parentNode.removeChild(pluginEl);
  }
  pluginEl = document.createElement('embed');
  pluginEl.type = 'application/x-gtvremote';
  pluginEl.id = 'pluginId';
  pluginEl.style.marginLeft = '120px';  // Center just for this demo.
  document.body.appendChild(pluginEl);
  document.getElementById('initialize-plugin').innerHTML =
      'Delete old plugin and make a new one';
};
</code></pre>

<p>This will create an embed and append it to the page.</p>
<center>
<img src="../images/press_create_embed.png" width="50%" alt="Create embed" title="Press create embed"> <img src="../images/visible_plugin.png" width="50%" alt="Visible plugin" title="Visible plugin">
</center>

<p>The embed is visible at the bottom of the page only for learning purposes. In a real application an embed shouldn't be made visible to the user.</p>
<p>If you are a Windows user and see an error instead of a white box for the embed make sure you have disabled the AnymoteExample before using the AnymoteLearningExercise.</p>
<h3 id="create-the-gtvremote-object">2. Create the GTVRemote object</h3>
<p>For all intents and purposes the embed element <b>is</b> the NPAPI plugin. The embed has exactly <a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/Plugin">one function</a> you need to call.</p>
<table><tbody><tr style="background-color: #ddd"><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Returns</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Method</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Description</strong>
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
GTVRemote
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
gtvremote.plugin.object.GTVRemote()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Uses the embed element to return the GTVRemote object. This is the bridge to make the plugin capabilities available in JavaScript.
</td></tr> </tbody></table>

<pre class="sh_javascript"><code>
var googletvremoteInitializePlugin = function() {
  // ... code from prior step

  var googletvremote = pluginEl.gtvremote.plugin.object.GTVRemote();
};
</code></pre>

<p>At this point the bridge from the C++ plugin binary to JavaScript is complete.</p>
<h3 id="initialize-the-gtvremote-object.">3. Initialize the GTVRemote object.</h3>
<p>The googletvremote has some <a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/GTVRemote">boilerplate initialization functions</a> that should be called to setup the remote.</p>
<table><tbody><tr style="background-color: #ddd"><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Returns</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Method</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Description</strong>
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;">  </td><td style="border: 1px solid #ccc; padding: 5px;"> 
init(<i>localAddress</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Initialize the plugin. <i>localAddress</i> is a string. Passing in an empty string '' is recommend and allows the plugin to retrieve the current IP address.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
boolean
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
loadCert(<i>pem</i>, <i>password</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Loads a client certificate to use when connecting with Google TV devices. <i>pem</i> (or certificate, ie cert) is a string that was previously generated by generateSelfSignedCert. <i>password</i> is a string that must match the string used by generateSelfSignedCert when creating the pem. Returns a boolean that is true if loading the cert was successful.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
string
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
generateSelfSignedCert(<i>uniqueId</i>, <i>password</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Generates a new private key and self-signed X509 certificate. <i>uniqueId</i> is a string that should be unique to this computer (used to avoid naming collisions with other computers connecting to the same TV). <i>password</i> is a string that should be a simple work specific to your extension.
</td></tr> </tbody></table>

<p>The certificate identifies the extension to Google TV and is used for secure message passing.</p>
<pre class="sh_javascript"><code>var googletvremoteInitializePlugin = function() {
  // ... code from prior steps

  googletvremote.init('');
  var cert = localStorage.getItem('cert');
  if (!cert || !googletvremote.loadCert(cert, 'password')) {
    // Change the 'password' to a unique string for your app.
    console.log('First launch.  Made a new certificate.');
    var uid = (((1 + Math.random()) * 0x10000000) | 0).toString(16);
    cert = googletvremote.generateSelfSignedCert('chrome-gtv-' + uid, 'password');
    localStorage.setItem('cert', cert);
    localStorage.removeItem(STORAGE_KEY_PAIRED_DEVICES);
  }
};
</code></pre>

<h3 id="creating-the-clients">4. Creating the clients</h3>
<p>The final step is to initialize the three client objects:</p>
<ul>
<li>Discovery Client</li>
<li>Pairing Session</li>
<li>Anymote Session</li>
</ul>
<table><tbody><tr style="background-color: #ddd"><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Returns</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Method</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Description</strong>
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
<a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/DiscoveryClient">Discovery Client</a>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
createDiscoveryClient()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Creates a discovery client for discovering devices.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
<a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/PairingSession">Pairing Session</a>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
createPairingSession()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Creates a new Polo pairing session.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
<a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/AnymoteSession">Anymote Session</a>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
createAnymoteSession()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Creates a new Anymote session for communication with a Google TV.
</td></tr> </tbody></table>

These variables
<pre class="sh_javascript"><code>
var googletvremoteInitializePlugin = function() {
  // ... code from prior steps

  discoveryClient = googletvremote.createDiscoveryClient();
  pairingSession = googletvremote.createPairingSession();
  anymoteSession = googletvremote.createAnymoteSession();
};
</code></pre>

<p>This initializes these three global variables. FYI these variables are declared in the following files:</p>
<ul>
<li>discovery_client_controller.js</li>
<li>pairing_session_controller.js</li>
<li>anymote_session_controller.js</li>
</ul>
<p>You are now ready to start using these clients to connect with a Google TV. You are <b>not</b> ready to use the Anymote commands yet, but if you'd like to do a fun little test, hit the &quot;Create a new plugin&quot; button, then try to hit the &quot;Home&quot; button to see what happens. It will fail because you are not connected to the TV, but it's fun to see something happen.</p>
<center>
<img src="../images/mr_yuck.png" width="50%" alt="Plugin failure" title="Plugin failure">
</center>

<p>You can clear the error state by hitting the button labelled &quot;Delete old plugin and make a new one&quot;. Again this was just for learning purposes. In a real app your UI should not allow a user to press Anymote communication buttons when not connected.</p>
<p>Enough goofing around you are finished with this step and ready to start Discovery.</p>
<center>
<img src="../images/plumbing_done.png" width="90%" alt="Plumbing complete" title="Plumbing complete">
</center>


<p><a href="../instructions.html">Back to main page</a> <span style="float: right;">Move on to <a href="discovery.html">Exercise 3 Discovery</a></span></p>
